<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>SVG text animate</title>
  <meta name="Description" content="A Javascript library for convert text to SVG stroke animations in the browser."/>
  <meta name="Keywords" content="Javascript,Text,SVG,svg,animation,animate,library"/>
  <script data-ad-client="ca-pub-4939355062175724" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <style>
    @font-face {
      font-family: OpenSans;
      src: url("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@v1.1.0/docs/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }
    
    html,
    body {
      width: 100%;
      position: relative;
      margin: 0;
    }

    #page {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .whitefont {
      filter: drop-shadow(1px 1px 3px black);
      padding: 0 5px;
    }

    .whiteshadow {
      filter: drop-shadow(2px 4px 3px #aaaaaa);
    }

    .inputbox {
      position: relative;
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .info {
      position: relative;
      font-size: 15px;
      font-style: oblique;
      color: grey;
      width: 70%;
    }
    .b{
      color:#333333;
      font-style: normal;
      font-size: 21px;
      margin-top: 20px;
    }

    .inputbox .input {
      height: 32px;
      width: 60%;
      border-radius: 30px;
      outline: none;
      font-size: 28px;
      padding: 0 10px;
      border: #333333 2px solid;
      color: #333333;
    }

    .inputbox .button {
      height: 32px;
      width: 100px;
      margin-left: 20px;
      background: none;
      border: #005792 2px solid;
      line-height: 24px;
      border-radius: 20px;
      outline: none;
      color: #005792;
      font-size: 23px;
      font-family: OpenSans;
    }

    .inputbox .button:hover text {
      transition: all 500ms linear;
      display: none;
    }

    .inputbox .button:hover {
      transition: all 500ms linear;
      background: #005792;
    }

    .inputbox .button svg {
      display: none;
    }

    .inputbox .button:hover svg {
      display: inline;
    }

    .playbox {
      margin: 30px;
      height: 200px;
      width: 80%;
      text-align: center;
      overflow-x: hidden;
      position: relative;
      border-radius: 20px;
      border: #333333 solid 2px;
      line-height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .delayshow {
      opacity: 0;
      transform: translateY(40%);
      animation: delayshow 800ms ease 4500ms forwards;
    }

    .footer {
      bottom: 0px;
      width: 100%;
      font-size: 16px;
      text-align: center;
      color: #333333;
    }

    @keyframes delayshow {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    nav{
      position:absolute;
      top:10px;
      right:100px;
      z-index: 9;
      width:150px;
    }
    nav li{
      display:inline-block;
      margin-right: 10px;
    }
    .loading{
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0,0,0,0.6);
      text-align: center;
      width: 300px;
      height: 200px;
      line-height: 200px;
      color: white;
      position: fixed;
    }
  </style>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127665058-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-127665058-2');
</script>
</head>

<body>
  <nav>
    <li><a href="https://oubenruing.github.io/svg-text-animate/index.html">中文</a></li>
    <li><a href="https://oubenruing.github.io/svg-text-animate/index_en.html">English</a></li>
  </nav>
  <section id="page">
    <div id="logo" style="height:100px;"></div>
    <div id="name" class="whiteshadow" style="height:72px;"></div>
    <div id="des" style="height:30px;width: 90%;text-align: center;"></div>
    <div class="inputbox delayshow" style="position: relative; width:100%; text-align: center;">
      <div class="info b">1.Enter a string in the input box below; 2.Click the "Try it" button.</div>
      <div style="width: 100%;display: flex;align-items: center;justify-content: center; height: 70px;"><input class="input" value="Hello World!" />
        <button class="button"><text>Try it</text><text id ="tsvg" style="display: inline-block;"></text></button></div>
    </div>
    <div class="info delayshow">This demo uses an open-source English font, so you can only input English
      letters, numbers and common punctuation marks.
      <br>The svg-text-animate also supports other fonts, such as Chinese<text id="chinese" class="whitefont"></text>,
      or even special symbols<text id="symbols" class="whitefont"></text><text id="symbols2" class="whitefont"></text>.
      <a href="https://github.com/oubenruing/svg-text-animate">Learn more</a></div>
    <div class="playbox delayshow"></div>
    <div class="footer">
      Copyright © 2019 Rui Chen - MIT License.
    </div>
  </section>
  <div id="loading" class="loading">
    The font is downloading ...
  </div>
  <a href="https://github.com/oubenruing/svg-text-animate" class="github-corner" aria-label="View source on GitHub"><svg
      width="80" height="80" viewBox="0 0 250 250"
      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
    
  </style>
</body>

</html>
<script src="https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/dist/svg-text-animate.min.js"></script>
<!-- <script src="../dist/svg-text-animate.js"></script> -->
<script>
  window.onload = async function () {
    var fontawesome = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/Font Awesome 5 Free-Regular-400.otf");
    await fontawesome.setFont();
  
    var chinese = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/SourceHanSansCN-Normal.ttf");
    await chinese.setFont();
    var opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/OpenSans-Regular-webfont.woff", {
      "duration": 300,
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 150,
      "mode": "delay"
    }, {
      "stroke": "#005792",
      "stroke-width": "2px",
      "font-size": 55
    });
    await opensans.setFont();
    document.querySelector("#loading").style.display="none";
    fontawesome.setOptions({
      "duration": 4000,
      "timing-function": "linear",
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 400,
      "mode": "delay"
    }).setStroke({
      "stroke": "#5db4f2",
      "stroke-width": "2px"
    }).create(String.fromCharCode(0xf25b), "#logo");

    opensans.create("svg-text-animate", "#name");
    opensans.setOptions({
      "duration": 500,
      "timing-function": "linear",
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 50,
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "2px",
      "font-size": 23
    }).create("Try it", ".inputbox .button #tsvg");

    chinese.setOptions({
      "duration": 2000,
      "timing-function": "linear",
      "direction": "alternate",
      "delay": 500,
      "iteration-count": "infinite",
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "1px",
      "font-size": 22
    }).create("你好", "#chinese");

    fontawesome.setOptions({
      "duration": 2000,
      "timing-function": "linear",
      "direction": "alternate",
      "delay": 500,
      "iteration-count": "infinite",
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "1px",
      "font-size": 22
    }).create(String.fromCharCode(0xf581), "#symbols")
      .create(String.fromCharCode(0xf164), "#symbols2");

    setTimeout(function () {
      opensans.setStroke({
        "stroke": "#5db4f2",
        "font-size": 30
      }).create("A Javascript library for convert text to SVG stroke animations in the browser.", "#des");
    }, 3000)

    opensans.setStroke({
      "stroke": "#333333",
      "font-size": 60
    }).create(document.querySelector(".input").value, ".playbox")

    document.querySelector(".button").addEventListener("click", function () {
      opensans.setStroke({
        "stroke": "#333333",
        "font-size": 60
      }).create(document.querySelector(".input").value, ".playbox")
    })
  }
</script>